function getStyle(obj, attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(obj, null)[attr];
        }
        return obj.currentStyle[attr];
    }

    window.onload = function(){



        //核心公式    小区域/大区域=小图/大图


        //  小区域= (小图/大图) *大区域;
        //求出比例   小图/小区域=大图/大区域

        var oBox = document.getElementById('box');

        var middleImg = document.getElementById('middleImg');// 小图
        var middleArea = document.getElementById('middleArea')//小区域

        var bigArea = document.getElementById('bigArea');//大区域
        var bigImg = document.getElementById('bigImg');//大图

        // 小区域 =(小图/大图)*大区域

        var sH = (parseInt(getStyle(middleImg, "height")) / parseInt(getStyle(bigImg, "height"))) * parseInt(getStyle(bigArea, "height"));

        var sW = (parseInt(getStyle(middleImg, "height")) / parseInt(getStyle(bigImg, "height"))) * parseInt(getStyle(bigArea, "height"));

        middleArea.style.width = sW + "px";

        middleArea.style.height = sH + "px";


        //如果当前 小区域是隐藏的  middleArea.offsetWidth 无法拿到宽度
        console.log(middleArea.offsetWidth);
        var oScale = middleImg.offsetWidth / parseInt(getStyle(middleArea, "width"))


        //鼠标进入小图,让小区域显示
        middleImg.onmouseenter = function(){
            middleArea.style.display = "block";
            bigArea.style.display = "block";
            document.onmousemove = function(evt){
                var e = evt || window.event;

                var mX = e.clientX - oBox.offsetLeft - middleArea.offsetWidth / 2;

                if(mX <= 0){
                    mX = 0;
                }
                if(mX > middleImg.offsetWidth - middleArea.offsetWidth){
                    mX = middleImg.offsetWidth - middleArea.offsetWidth;
                }
                var mY = e.clientY - oBox.offsetTop - middleArea.offsetHeight / 2;


                if(mY <= 0){
                    mY = 0;
                }
                if(mY > middleImg.offsetWidth - middleArea.offsetWidth){
                    mY = middleImg.offsetWidth - middleArea.offsetWidth;
                }

                middleArea.style.left = mX + "px";
                middleArea.style.top = mY + "px";

                //移动大图
                bigImg.style.left = -oScale * mX + "px";
                bigImg.style.top = -oScale * mY + "px";

            }
        }


        middleImg.onmouseleave = function(){
            document.onmousemove = null;
            bigArea.style.display = "none";
            middleArea.style.display = "none";
        }

        var oLis = document.querySelectorAll('#small li');
        for(var [k, o] of oLis.entries()){

            o.index = k;
            o.onclick = function(){
//                alert(this.index);
                middleImg.children[0].src = `img/inf/0${this.index + 1}.jpg`;
                bigArea.children[0].src = `img/inf/0${this.index + 1}.jpg`;
            }

        }


    }